<template>
  <div style="background: #ddd;">
    <div class="drag_div" id="drag_div">
      <div class="one drag_item" >
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall1.jpg"></p>
        <p class="text_center">我是第一张</p>
      </div>
      <div class="two drag_item" >
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall2.jpg"></p>
        <p class="text_center">我是第二张</p>
      </div>
      <div class="three drag_item" >
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall3.jpg"></p>
        <p class="text_center">我是第三张</p>
      </div>
      <div class="four drag_item" >
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall4.jpg"></p>
        <p class="text_center">我是第四张</p>
      </div>
      <div class="five drag_item">
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall5.jpg"></p>
        <p class="text_center">我是第五张</p>
      </div>
      <div class="six drag_item">
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall6.jpg"></p>
        <p class="text_center">我是第六张</p>
      </div>
      <div class="seven drag_item">
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall7.jpg"></p>
        <p class="text_center">我是第七张</p>
      </div>
      <div class="eight drag_item">
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall8.jpg"></p>
        <p class="text_center">我是第八张</p>
      </div>
      <div class="nine drag_item">
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall1.jpg"></p>
        <p class="text_center">我是第九张</p>
      </div>
      <div class="ten drag_item">
        <p class="img_100 margin_bottom_15"><img src="../assets/drag_images/wall2.jpg"></p>
        <p class="text_center">我是第十张</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {initdrag} from '../assets/drag_js/tuozhuai.js'

  export default {
    data() {
      return {}
    },
    computed: {},
    mounted() {
      initdrag();
    },
    methods: {},
    destroyed() {
    },
    created() {
//      initdrag();
    }
  }


</script>

<style scoped type="text/css">
  .img_100 img {
    width: 100%;
    max-width: 100%;
  }

  .margin_bottom_15 {
    margin-bottom: 15px;
  }

  .text_center {
    text-align: center;
  }

  .drag_div {
    width: 1300px;
    height: 760px;
    overflow: hidden;
    position: relative;
  }

  .drag_div > div {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .drag_div > div.one {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 240px;
  }

  .drag_div > div.two {
    position: absolute;
    top: 260px;
    left: 0;
    width: 20%;
    height: 240px;
  }

  .drag_div > div.three {
    position: absolute;
    top: 520px;
    left: 0;
    width: 20%;
    height: 240px;
  }

  .drag_div > div.four {
    position: absolute;
    top: 0px;
    left: 21%;
    width: 37%;
    height: 760px;
  }

  .drag_div > div.five {
    position: absolute;
    top: 0px;
    left: 59%;
    width: 20%;
    height: 280px;
  }

  .drag_div > div.six {
    position: absolute;
    top: 300px;
    left: 59%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.seven {
    position: absolute;
    top: 540px;
    left: 59%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.eight {
    position: absolute;
    top: 0px;
    left: 80%;
    width: 20%;
    height: 280px;
  }

  .drag_div > div.nine {
    position: absolute;
    top: 300px;
    left: 80%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.ten {
    position: absolute;
    top: 540px;
    left: 80%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.one img, .drag_div > div.two img, .drag_div > div.three img {
    width: 100%;
    height: 180px;
  }

  .drag_div > div.four img {
    width: 100%;
    height: 700px;
  }

  .drag_div > div.five img, .drag_div > div.eight img {
    width: 100%;
    height: 220px;
  }

  .drag_div > div.six img, .drag_div > div.seven img, .drag_div > div.nine img, .drag_div > div.ten img {
    width: 100%;
    height: 160px;
  }
</style>
